<template>
	<transition name="popup-slide-up">
		<div class="ebook-popup-list" v-show="fontFamilyVisible">
			<div class="ebook-popup-title">
				<!-- 隐藏图标 -->
				<div class="ebook-popup-title-icon" @click="hide">
					<span class="icon-down2"></span>
				</div>
				<span class="ebook-popup-title-text">{{$t('book.selectFont')}}</span>
			</div>
			<div class="ebook-popup-list-wrapper">
				<div class="ebook-popup-item" v-for="(item, index) in fontFamilyList" :key="index" @click="setFontFamily(item.font)">
					<div class="ebook-popup-item-text" :class="{'selected': isSelected(item)}">{{item.font}}</div>
					<div class="ebook-popup-item-check" v-if="isSelected(item)">
						<span class="icon-check"></span>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
import { FONT_FAMILY } from '../../utils/book'
import { ebookMixin } from '../../utils/mixin'
import { saveFontFamily } from '../../utils/localStorage'
export default {
	mixins: [ebookMixin],
	data() {
		return {
			fontFamilyList: FONT_FAMILY
		}
	},
	methods: {
		setFontFamily(font) {
			// 选中设置字体
			this.setDefaultFontFamily(font)
			// 保存字体数据
			saveFontFamily(this.fileName, font)
			// 设置字体
			if (font === 'Default') {
				this.currentBook.rendition.themes.font('Time New Roman')
			} else {
				this.currentBook.rendition.themes.font(font)
			}
		},
		// 设置选中项
		isSelected(item) {
			return this.defaultFontFamily === item.font
		},
		hide() {
			// 点击隐藏选择字体菜单栏
			this.setFontFamilyVisible(false)
		}
	},
	mounted() {
		// 存入字体数据
		// setLocalStorage(this.fileName, this.defaultFontFamily)
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	// $ratio: 375 / 10;

	// @function px2rem($px) {
  //   @return $px / $ratio + rem;
	// }

	// @mixin center {
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// @mixin left {
	// 	display: flex;
	// 	justify-content: flex-start;
	// 	align-items: center;
	// }

	// @mixin right {
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// }
	@import "../../assets/styles/global.scss";

	.ebook-popup-list {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 300;
		width: 100%;
		background: white;
		box-shadow: 0 px2rem(-4) px2rem(6) rgba(0, 0, 0, .1);
		.ebook-popup-title {
			position: relative;
			padding: px2rem(15);
			box-sizing: border-box;
			border-bottom: px2rem(1) solid #b8b9bb;
			text-align: center;
			@include center;
			.ebook-popup-title-icon {
				position: absolute;
				left: px2rem(15);
				top: 0;
				height: 100%;
				font-size: px2rem(16);
				font-weight: bold;
				@include center;
			}
			.ebook-popup-title-text {
				font-size: px2rem(14);
				font-weight: bold;
			}
		}
		.ebook-popup-list-wrapper {
			.ebook-popup-item {
				display: flex;
				padding: px2rem(15);
				.ebook-popup-item-text {
					flex: 1;
					font-size: px2rem(14);
					text-align: left;
					&.selected {
						color: #346cb9;
						font-weight: bold;
					}
				}
				.ebook-popup-item-check {
					flex: 1;
					text-align: right;
					font-size: px2rem(14);
					color: #346cb9;
					font-weight: bold;
				}
			}
		}
	}

	// 过渡动画
	.slide-down-enter, .slide-down-leave-to {
  transform: translate3d(0, -100%, 0)
	}
	.slide-down-enter-to, .slide-down-leave, .slide-up-enter-to, .slide-up-leave {
	  transform: translate3d(0, 0, 0)
	}
	.slide-down-enter-active, .slide-down-leave-active, .slide-up-enter-active, .slide-up-leave-active, .fade-enter-active, .fade-leave-active, .slide-right-enter-active, .slide-right-leave-active, .popup-slide-up-enter-active, .popup-slide-up-leave-active {
	  transition: all .2s linear;
	}
	.slide-up-enter, .slide-up-leave-to {
	  transform: translate3d(0, px2rem(138), 0)
	}
	.fade-enter, .fade-leave-to {
	  opacity: 0;
	}
	.fade-enter-to, .fade-leave {
	  opacity: 1;
	}
	.slide-right-enter, .slide-right-leave-to {
	  transform: translate3d(-100%, 0, 0);
	}

	.popup-slide-up-enter, .popup-slide-up-leave-to {
		transform: translate3d(0, 100%, 0);  //动画的初始位置
		opacity: 0;
	}

	.popup-slide-up-enter-to, .popup-slide-up-leave {
		transform: translate3d(0, 0, 0);  //动画的结束位置
		opacity: 1;
	}

</style>
